<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ year }}</p>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="count++">click, newResult:{{ doubleCount }}</button>
    <ul>
      <li v-for="item in newList" :key="item.id">
        {{ item.name }} rate {{ item.rate }}
      </li>
    </ul>
    <input type="text" placeholder="文本测试" @change="inputChange" />
    <button @click="Click">按钮内容</button>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

const count = ref(1)
console.log(count.value)

const year = ref<number | string>('2024')
console.log(year.value)

type ListItem = {
  id: number
  name: string
}

const list = ref<ListItem[]>([
  { id: 1, name: 'a' },
  { id: 2, name: 'b' },
  { id: 3, name: 'c' },
])
console.log(list.value)

type Person = {
  name: string
  age?: number
  gender: string
}
const e = reactive<Person>({
  name: '张三',
  gender: 'fale',
})
e.age = 18
console.log(e)

const doubleCount = computed(() => count.value * 2)
console.log(doubleCount.value)

type Currency = {
  id: string
  name: string
  rate: number
}

const currency = reactive<Currency[]>([
  { id: '001', name: 'USD', rate: 1 },
  { id: '002', name: 'RUB', rate: 90 },
  { id: '003', name: 'KZT', rate: 440 },
  { id: '004', name: 'SGD', rate: 1.3 },
])
const newList = computed(() => currency.filter((item) => item.rate > 60))

const inputChange = (e: Event) => {
  // console.log((e.target as HTMLInputElement).value)
  console.log((<HTMLInputElement>e.target).value)
}

const Click = (e: Event) => {
  console.log((<HTMLButtonElement>e.target).innerHTML)
}
</script>

<style scoped></style>
